<template lang="html">
    <div v-loading="loading">
        <el-container style=" border: 1px solid #eee">
            <el-aside
                width="200px"
                style="background-color: rgb(238, 241, 246)"
            >
                <el-menu
                    :default-openeds="['1']"
                    :default-active="this.$route.path"
                    :collapse="isCollapse"
                    router
                >
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-setting" />基本操作
                        </template>
                        <el-menu-item-group>
                            <el-menu-item
                                index="/caryard"
                            >
                                车场记录管理
                            </el-menu-item>
                            <el-menu-item
                                index="/log"
                            >
                                日志
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header style="text-align: right; font-size: 15px">
                    <el-dropdown size="medium">
                        <i
                            class="el-icon-setting"
                            style="margin-right: 5px"
                        />
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <span @click="loginOut()">清除缓存退出登录</span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span>{{ username }}</span>
                </el-header>
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
        <!-- <UserFunc /> -->
    </div>
</template>

<script>
import {
    getToken,
    getCookie,
    removeToken
} from '@/utils/cookie'
export default {
    data() {
        return {
            loading: false,
            isCollapse: false,
        }
    },
    created: function() {

    },
    methods: {
        loginOut(){
            removeToken();
            this.$router.push({
                path: "/login"
            })
        }
    },
    computed:{
        username(){
            return this.$store.state.userinfo.username
        }
    },
    components: {
        // Heador,
        // UserFunc
    },
}
</script>

<style lang="scss" scoped module>
.carousel {
    width: 600px;
    height: 50px;
    font-size: 15px;
    margin: 50px auto 0;
    align-items: center;
    .tongzhiguangbo {
        width: 20px;
        height: 20px;
    }
}
</style>
